<template>
	<view>
		<swiper style="border-bottom: 1px solid #EDEDED;" indicator-color="#999" indicator-active-color="#fff" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<view class="" v-if="bannerList.length" >
				<swiper-item v-for="(item,index) in bannerList" @click="$go(nativeUrl)" :key='index'><view class="swiper-item">
				<image :src="item.resourceImg" style="width: 100%;height: 100%;" mode=""></image>
				</view></swiper-item>
				
			</view>
			<view class="" v-else>
				<swiper-item ><view class="swiper-item flex_center">
				~暂无数据~
				</view></swiper-item>
			</view>
		</swiper>
		<view class="nav_vox flex_v_venter">
			<view class="item flex_coum_center" @click="chooseItem(item)" v-for="(item,index) in categoryList" :key='index'>
				<image :src="item.resourceImg" mode=""></image>
				<text>{{item.name}}</text>
			</view>
			 <!-- @click="$go('./classification')" -->
			<view class="item flex_coum_center" @click="$go('./classification')">
				<image class="w" src="../../static/shop/n4.png" mode=""></image>
				<text>全部分类</text>
			</view>
		</view>
		<view class="title flex_r_between">
			<view class=""></view>
			<view class="n flex_coum_center">每日抢购</view>
			<view class="l flex_v_venter" @click="$go('./goods-list')">
				<text>更多</text>
				<image src="../../static/shop/right.png" mode=""></image>
			</view>
		</view>
		<view class="box_good flex_r_between">
			<view class="item"  v-for="item in list" :key='item.id'>
				<view class="img" style="box-shadow: 0 0 1rpx 5rpx #EDEDED;">
					<image style="width: 325rpx;height: 325rpx;border-radius: 10rpx;" :src="item.thumbnail.replace(/\\/g,'/')" mode=""></image>
				</view>
				<view class="name text_ellipsis" style="text-align: center;">
					{{item.name}}
				</view>
				<view class="price">
					<text class="t">¥{{item.retailPrice}} + </text>
					<text style="margin: 0 0 0 5rpx;">{{item.maxScore}}积分 </text>
				</view>
				<view class="btn flex_coum_center" @click="$go('./good-detail?id=' + item.id)">
					立即抢购
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goodsList:[],
			pageSize: 10,
			pageIndex: 1,
			list: [],
			finish: false,
			bannerList:[],
			categoryList:[]
		};
	},
	methods:{
		chooseItem(cur){
			uni.navigateTo({
				url:'/pages/shop/goods-list?item=' + JSON.stringify({id:cur.id,name:cur.name})
			})
		},
		getlist() {
				this.$ajax('api/Shop/QueryMainGoods', { pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
					if (res.Data.list.length) {
						this.list = this.list.concat(res.Data.list);
						this.pageIndex++;
						this.finish = false;
					} else {
						this.finish = true;
					}
					uni.hideLoading();
				});
			}
		},
		onShow() {
			this.pageIndex = 1
			this.list = []
			this.getlist();
			this.$ajax('api/Shop/QueryMainBanner').then(res => {
				this.bannerList = res.Data.list
			})
			this.$ajax('api/Shop/QueryMainCategory').then(res => {
				this.categoryList = res.Data.list
			})
		},
		onReachBottom() {
			uni.showLoading({
				title: '加载中'
			});
			if (!this.finish) {
				this.getlist();
			}else{
				uni.hideLoading()
			}
		}
};
</script>

<style lang="scss">
.swiper-item {
	height: 100%;
	background: #F2F2F2;
	color: #999;
}
.nav_vox {
	.item {
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		margin: 63rpx 0 92rpx;
		width: 25%;
		& > image {
			width: 49rpx;
			height: 67rpx;
			margin: 0 0 20rpx;
		}
		& > image.w {
			width: 67rpx;
		}
	}
}
.title {
	margin: 0 30rpx 77rpx;
	.n {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #05072e;
		line-height: 48rpx;
		&::after{
			content: '';
			display: inline-block;
			width: 176rpx;
			height: 2rpx;
			background: #DCC68D;
			margin: 9rpx 0 0;
		}
	}
	.l {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		line-height: 55rpx;
		align-self: flex-end;
		& > image {
			width: 9rpx;
			height: 16rpx;
			margin: 0 0 0 8rpx;
		}
	}
}
.box_good{
	display: flex;
	flex-wrap: wrap;
	margin: 0 30rpx;
	.item{
		width: 47%;
		margin: 0 0 62rpx 0;
		// &:nth-child(2n){
		// margin: 0 0 62rpx 0;
		// }
		.img{
			width: 100%;
			border-radius: 5px;
		}
		.name{
			width: 100%;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000033;
			line-height: 48rpx;
			-webkit-line-clamp: 2;
			margin: 30rpx 0 10rpx;
		}
		.price{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 48rpx;
			color: #E0BC60;
			text-align: center;
			&>.t{
				color: #333333;
			}
		}
		.btn{
			width: 100%;
			height: 71rpx;
			background: #FFFFFF;
			border: 1px solid #333333;
			border-radius: 3rpx;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin: 20rpx 0 0;
		}
	}
}
</style>
